<template>
  <div class="restaurant-list">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-input
            v-model="searchQuery"
            placeholder="搜索餐厅"
            prefix-icon="el-icon-search"
            class="search-input"
            @input="onSearch"
        ></el-input>
        <el-button type="primary" @click="showAddDialog = true">添加餐厅</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>餐厅列表</span>
            </div>
          </template>
          <el-scrollbar height="400px">
            <el-row :gutter="20">
              <el-col :span="8" v-for="(restaurant, index) in filteredRestaurants" :key="index">
                <el-card shadow="hover" class="restaurant-card">
                  <div class="restaurant-info">
                    <h3>{{ restaurant.name }}</h3>
                    <p>地址: {{ restaurant.address }}</p>
                    <p>评分: {{ restaurant.rating }}</p>
                    <el-button type="primary" size="mini" @click="showEditDialog(index)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(index)">删除</el-button>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
        layout="prev, pager, next"
        :total="restaurants.length"
        :page-size="pageSize"
        @current-change="onPageChange"
        class="pagination"
    ></el-pagination>
    <el-dialog v-model="showAddDialog" title="添加餐厅" width="30%">
      <el-form :model="newRestaurant" label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="newRestaurant.name" placeholder="请输入餐厅名称"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="newRestaurant.address" placeholder="请输入餐厅地址"></el-input>
        </el-form-item>
        <el-form-item label="评分">
          <el-input v-model="newRestaurant.rating" placeholder="请输入评分"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleAdd">添 加</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="showEditDialogVisible" title="编辑餐厅" width="30%">
      <el-form :model="editRestaurant" label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="editRestaurant.name" placeholder="请输入餐厅名称"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editRestaurant.address" placeholder="请输入餐厅地址"></el-input>
        </el-form-item>
        <el-form-item label="评分">
          <el-input v-model="editRestaurant.rating" placeholder="请输入评分"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showEditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleEdit">保 存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  name: 'RestaurantList',
  setup() {
    const restaurants = ref([
      { name: '芜湖小笼包', address: '芜湖市镜湖区步行街', rating: 4.5 },
      { name: '芜湖烤鱼', address: '芜湖市弋江区万达广场', rating: 4.2 },
      { name: '芜湖牛肉面', address: '芜湖市鸠江区中央城', rating: 4.8 },
      { name: '芜湖火锅', address: '芜湖市弋江区中央公园', rating: 4.0 },
      { name: '芜湖烧烤', address: '芜湖市镜湖区银泰城', rating: 4.3 },
      { name: '芜湖小吃', address: '芜湖市鸠江区新华书店', rating: 4.7 },
      { name: '芜湖海鲜', address: '芜湖市弋江区奥体中心', rating: 4.4 },
      { name: '芜湖面馆', address: '芜湖市镜湖区大润发', rating: 4.6 },
      { name: '芜湖蛋糕店', address: '芜湖市鸠江区苏宁广场', rating: 4.9 },
      { name: '芜湖甜品', address: '芜湖市弋江区吾悦广场', rating: 4.1 }
    ])

    const searchQuery = ref('')
    const currentPage = ref(1)
    const pageSize = 5
    const showAddDialog = ref(false)
    const showEditDialogVisible = ref(false)
    const newRestaurant = ref({ name: '', address: '', rating: '' })
    const editRestaurant = ref({ name: '', address: '', rating: '' })
    const editIndex = ref(-1)

    const filteredRestaurants = computed(() => {
      let filtered = restaurants.value.filter(restaurant =>
          restaurant.name.toLowerCase().includes(searchQuery.value.toLowerCase())
      )
      return filtered.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize)
    })

    const onSearch = (value) => {
      console.log(`搜索查询: ${value}`)
      currentPage.value = 1 // 重置到第一页
    }

    const onPageChange = (page) => {
      currentPage.value = page
    }

    const handleAdd = () => {
      if (newRestaurant.value.name && newRestaurant.value.address && newRestaurant.value.rating) {
        restaurants.value.push({
          name: newRestaurant.value.name,
          address: newRestaurant.value.address,
          rating: parseFloat(newRestaurant.value.rating)
        })
        newRestaurant.value = { name: '', address: '', rating: '' }
        showAddDialog.value = false
      } else {
        alert('请填写完整信息')
      }
    }

    const handleDelete = (index) => {
      restaurants.value.splice(index, 1)
    }

    const showEditDialog = (index) => {
      editIndex.value = index
      editRestaurant.value = { ...restaurants.value[index] }
      showEditDialogVisible.value = true
    }

    const handleEdit = () => {
      if (editRestaurant.value.name && editRestaurant.value.address && editRestaurant.value.rating) {
        restaurants.value[editIndex.value] = {
          name: editRestaurant.value.name,
          address: editRestaurant.value.address,
          rating: parseFloat(editRestaurant.value.rating)
        }
        showEditDialogVisible.value = false
      } else {
        alert('请填写完整信息')
      }
    }

    return {
      restaurants,
      searchQuery,
      currentPage,
      pageSize,
      showAddDialog,
      showEditDialogVisible,
      newRestaurant,
      editRestaurant,
      filteredRestaurants,
      onSearch,
      onPageChange,
      handleAdd,
      handleDelete,
      showEditDialog,
      handleEdit
    }
  }
})
</script>

<style scoped>
.restaurant-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.search-input {
  margin-bottom: 20px;
  width: 100%;
  background-color: #f5f5dc;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.box-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.restaurant-card {
  margin-bottom: 20px;
  text-align: left;
}

.restaurant-info {
  padding: 10px;
}

.restaurant-info h3 {
  margin: 0;
  font-size: 18px;
}

.restaurant-info p {
  margin: 5px 0;
  font-size: 14px;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.author {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

.el-button {
  margin-bottom: 20px;
}
</style>